import _ from 'lodash'
import UUID from 'uuid'
import plugin from '../pluginDefs/index'
import jsonForm from '../../../../../common/components/myForm/jsonForm'
import Vue from 'vue'

export function deleteFunctionKey(option) {
  delete option.configComponent
  delete option.renderComponent
  delete option.initConfigDataFn
  if (option.category === 'layout' && option.config.containers.length > 0) {
    _.forEach(option.config.containers, one => {
      if (one.children && one.children.length > 0) {
        _.forEach(one.children, child => {
          deleteFunctionKey(child)
        })
      }
    })
  }

  return _.cloneDeep(option)
}

export function addFunctionKey(option) {
  option.configComponent = plugin[option.device][option.name].configComponent
  option.renderComponent = plugin[option.device][option.name].renderComponent
  option.initConfigDataFn = plugin[option.device][option.name].initConfigDataFn
  // 组件事件兼容以前拖拽的页面
  if (!('pluginEvent' in option.config)) {
    option.config.pluginEvent = option.initConfigDataFn().pluginEvent
  }
  if (option.category === 'layout' && option.config.containers.length > 0) {
    _.forEach(option.config.containers, one => {
      if (one.children && one.children.length > 0) {
        _.forEach(one.children, child => {
          addFunctionKey(child)
        })
      }
    })
  }
  return _.cloneDeep(option)
}

export function addId(option) {
  option.config.componentId = 'pluginUniqueId' + UUID()
  // option.config.componentId = _.uniqueId('Id_')
  if (option.category === 'layout' && option.config.containers.length > 0) {
    _.forEach(option.config.containers, one => {
      if (one.children && one.children.length > 0) {
        _.forEach(one.children, child => {
          addId(child)
        })
      }
    })
  }
  return _.cloneDeep(option)
}

// export function findOneByComponentId(option, componentId) {
//   if (option.config.componentId === componentId) {
//     return option
//   } else if (option.category === 'layout' && option.config.containers.length > 0) {
//     _.forEach(option.config.containers, one => {
//       if (one.children && one.children.length > 0) {
//         _.forEach(one.children, child => {
//           debugger
//           findOneByComponentId(child, componentId)
//         })
//       }
//     })
//   } else {
//     return undefined
//   }
// }
export function addSpecialFlag(option, flagName, flagValue) {
  option[flagName] = flagValue
  if (option.category === 'layout' && option.config.containers.length > 0) {
    _.forEach(option.config.containers, one => {
      if (one.children && one.children.length > 0) {
        _.forEach(one.children, child => {
          addSpecialFlag(child, flagName, flagValue)
        })
      }
    })
  }
  return _.cloneDeep(option)
}

export function removeSpecialFlag(option, flagName) {
  delete option[flagName]
  if (option.category === 'layout' && option.config.containers.length > 0) {
    _.forEach(option.config.containers, one => {
      if (one.children && one.children.length > 0) {
        _.forEach(one.children, child => {
          removeSpecialFlag(child, flagName)
        })
      }
    })
  }
  return _.cloneDeep(option)
}

// export function pluginDefsConfigValidate(option, tabName) {
//   if (!option.configComponent) {
//     addFunctionKey(option)
//   }
//   let id = _.uniqueId('jsonConfigId')
//   let oDom = document.createElement('div')
//   oDom.id = id
//   document.body.appendChild(oDom)
//   let jsonConfigVue = new Vue({
//     el: `#${id}`,
//     components: { jsonForm },
//     template: `<div id="${id}"><json-form ref="configComponent"  :config="option.configComponent" :value="option.config" :cloneValue = "false" v-if="option"></json-form></div>`,
//     data: {
//       option
//     }
//   })
//   return jsonConfigVue.$refs.configComponent.validate().then(validate => {
//     document.body.removeChild(document.querySelector('#' + id))
//     if (option.category === 'layout' && option.config.containers.length > 0) {
//       return Promise.all(_.flatten(_.map(option.config.containers, one => {
//         if (one.children.length > 0) {
//           return _.map(one.children, child => {
//             return pluginDefsConfigValidate(child, tabName)
//           })
//         } else {
//           return []
//         }
//       })))
//     }
//   }, () => {
//     document.body.removeChild(document.querySelector('#' + id))
//     return Promise.reject(tabName ? [option, tabName] : option)
//   })
// }

// export function sortableConfigValidate(obj, resolve, reject) {
//   let configValidate = (sortable) => {
//     return Promise.all(_.flattenDeep(_.map(sortable, item => {
//       return _.map(item.list, one => {
//         return pluginDefsConfigValidate(one, item.name)
//       })
//     })))
//   }
//   // let obj = { APP: this.initTemplateInfo.APP.sortable, PC: this.initTemplateInfo.PC.sortable }
//   Promise.all(_.map(obj, (value, index) => {
//     if (value) {
//       return configValidate(value)
//     }
//   })).then(() => {
//     resolve()
//   }).catch(errData => {
//     reject(errData)
//     // this.designDeviceChoose = errData[0].device
//     // this.operateTemplateShow = false
//     // this.$nextTick(() => {
//     //   this.operateTemplateShow = true
//     //   this.$nextTick(() => {
//     //     if (this.operateTemplateShow) {
//     //       // this.$refs.operateTemplate.chooseComponentId = errData[0].config.componentId
//     //       this.$refs.operateTemplate.$refs.configArea.compontentInfo = undefined
//     //       this.$refs.operateTemplate.$refs.configArea.compontentConfig(errData[0])
//     //       this.$refs.operateTemplate.$refs.designArea.tabActiveName = errData[1]
//     //       this.$message.error('保存失败 , 目前选中的组件配置有误!')
//     //     }
//     //   })
//     // })
//   })
// }

export function pluginDefsConfigValidate(option, tabName) {
  if (!option.configComponent) {
    addFunctionKey(option)
  }
  let id = _.uniqueId('jsonConfigId')
  let oDom = document.createElement('div')
  oDom.id = id
  document.body.appendChild(oDom)
  let jsonConfigVue = new Vue({
    el: `#${id}`,
    components: { jsonForm },
    template: `<div id="${id}"><json-form ref="configComponent"  :config="option.configComponent" :value="option.config" :cloneValue = "false" v-if="option"></json-form></div>`,
    data: {
      option
    }
  })
  return jsonConfigVue.$refs.configComponent.validate().then(validate => {
    document.body.removeChild(document.querySelector('#' + id))
    if (option.category === 'layout' && option.config.containers.length > 0) {
      return Promise.all(_.flatten(_.map(option.config.containers, one => {
        if (one.children.length > 0) {
          return _.map(one.children, child => {
            return pluginDefsConfigValidate(child, tabName)
          })
        } else {
          return []
        }
      })))
    }
  }, () => {
    document.body.removeChild(document.querySelector('#' + id))
    // return Promise.reject(tabName ? [option, tabName] : option)
    let errData = { plugin: option, tabName: tabName }
    return Promise.reject(errData)
  })
}

export function sortableConfigValidate(obj, resolve, reject, resourceId) {
  let configValidate = (sortable) => {
    return Promise.all(_.flattenDeep(_.map(sortable, item => {
      return _.map(item.list, one => {
        return pluginDefsConfigValidate(one, item.name)
      })
    })))
  }
  
  // let obj = { APP: this.initTemplateInfo.APP.sortable, PC: this.initTemplateInfo.PC.sortable }
  Promise.all(_.map(obj, (value, index) => {
    if (value) {
      return configValidate(value)
    }
  })).then(() => {
    resolve()
  }).catch(errData => {
    errData.resourceId = resourceId
    reject(errData)
    // this.designDeviceChoose = errData[0].device
    // this.operateTemplateShow = false
    // this.$nextTick(() => {
    //   this.operateTemplateShow = true
    //   this.$nextTick(() => {
    //     if (this.operateTemplateShow) {
    //       // this.$refs.operateTemplate.chooseComponentId = errData[0].config.componentId
    //       this.$refs.operateTemplate.$refs.configArea.compontentInfo = undefined
    //       this.$refs.operateTemplate.$refs.configArea.compontentConfig(errData[0])
    //       this.$refs.operateTemplate.$refs.designArea.tabActiveName = errData[1]
    //       this.$message.error('保存失败 , 目前选中的组件配置有误!')
    //     }
    //   })
    // })
  })
}
